<!--
 * @Author: weisheng
 * @Date: 2021-12-22 15:19:08
 * @LastEditTime: 2023-05-31 14:38:57
 * @LastEditors: weisheng
 * @Description: 
 * @FilePath: \uniapp-vue3-fant-ts\src\pages\home\Home.vue
 * 记得注释
-->
<template>
  <view class="home-container">
    <view class="slider-section">
      <SliderBar :select-index="state.selectIndex" @itemTap="itemTapHandler" :categoryList="state.categoryList"></SliderBar>
    </view>
    <view class="list-section">
      <scroll-view @scroll="scrollChange" :scroll-with-animation="true" :scroll-into-view="state.scrollToId" scroll-y="true" class="list-scroll">
        <view v-for="(item, index) in state.productList" :id="'item-' + index" class="list-item">
          <CategoryItem :category-obj="item"></CategoryItem>
        </view>
        <view class="blank-section"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { loginAPI, getCategoryList } from '@/api/DemoApi'
import { onMounted, reactive } from 'vue'
import SliderBar from '@/components/SliderBar/SliderBar.vue'
import CategoryItem from '@/components/CategoryItem/CategoryItem.vue'
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const state = reactive({
  categoryList: [],
  productList: [],
  selectIndex: 0,
  scrollToId: 'item-0',
  heightList: []
})

onShow(() => {
  // doInit()
  // setTimeout(() => {
  // 	doInit('same')
  // }, 400)
})

const loginAction = () => {
  let params = {
    tel: '18171171929',
    smsCode: '999999'
  }
  loginAPI(params)
    .then((resp) => {
      // console.log('登录回调:' + JSON.stringify(resp));
      uni.setStorageSync('lx-ticket', resp.data)
      getCategoryListAction()
    })
    .catch((error) => {
    })
}

const scrollChange = (e: any) => {
  let top = e.detail.scrollTop
  if (top < state.heightList[0]) {
    state.selectIndex = 0
  } else {
    state.heightList.forEach((item: number, index: number) => {
      if (top >= item) {
        state.selectIndex = index + 1
      }
    })
  }
}

const getCategoryListAction = () => {
  getCategoryList()
    .then((res: any) => {
      // console.log('分类列表回调:' + JSON.stringify(res));
      if (res.status === 0) {
        state.categoryList = res.data
        state.productList = res.data
        // console.log('板块列表:' + JSON.stringify(state.productList));
        setTimeout(function () {
          calculateItemHeight()
        }, 500)
      }
    })
    .catch((error) => {
    })
}

const itemTapHandler = (index: number) => {
  state.selectIndex = index
  state.scrollToId = 'item-' + index
}

const calculateItemHeight = () => {
  let h: number = 0
  state.categoryList.forEach((item: any, index: number) => {
    let view = uni
      .createSelectorQuery()
      .in(instance)
      .select('#item-' + index)
    view
      .fields(
        {
          size: true
        },
        (data: any) => {
          h += data.height
          state.heightList.push(h)
        }
      )
      .exec()
  })
}

onMounted(() => {
  loginAction()
})
</script>

<style lang="scss" scoped>
.home-container {
  height: 100%;
  display: flex;

  .slider-section {
    width: 120upx;
    height: 100%;
    background-color: #ededed;
  }

  .list-section {
    width: calc(100% - 120upx);
    height: 100%;
    background-color: #ededed;

    .list-scroll {
      height: 100%;

      .list-item {
        margin-top: 20upx;
        padding: 0 20upx;

        &:first-child {
          margin-top: 0;
        }
      }

      .blank-section {
        height: calc(100% - 300upx);
      }
    }
  }
}
</style>
